<template>
  <view>
    <myheader color="#8CD0EB"></myheader>
    <view class="header">
      <uni-nav-bar title="小杨来记账" backgroundColor="#8CD0EB" :border="false" rightIcon="bars"></uni-nav-bar>
      <!-- 年份 收入 支出数据 -->
      <view class="data">
        <!-- 年份 -->
        <view class="year">
          <view class="text">{{year}}年</view>
          <view class="month">
            <picker mode="date" @change="handleDate" :value="date" start="1900-01-01" end="2100-12-31" fields="month">
              <text>{{month}}月</text>
              <uni-icons type="bottom" size="15"></uni-icons>
            </picker>
          </view>
        </view>
        <!-- 收入 -->
        <view class="ru">
          <view class="text">收入</view>
          <view>{{iMoney}}</view>
        </view>
        <!-- 支出 -->
        <view class="cu">
          <view class="text">支出</view>
          <view>{{eMoney}}</view>
        </view>
      </view>
    </view>
    <!-- 消费详情 -->
    <scroll-view scroll-y="true" class="scroll" :style="{height:scrollHeight-45+'px'}">
        <expendcard  :year="year" :month="month" :dayList='$store.state.tallyList' @monthMoney="monthMoney"></expendcard>
    </scroll-view>
  </view>
</template>

<script>
  import {year,month} from '@/utils/fromDate.js'
  export default {
    data() {
      return {
        date: '',
        year: year,
        month: month,
        scrollHeight:0,
        eMoney:0,  // 每月支出汇总
        iMoney:0,  // 每月收入汇总
      }
    },
    mounted() {
      // 获取数据
      this.getTally()
      // 获取 设备  高度
      let height = uni.getSystemInfoSync().screenHeight
      const query = uni.createSelectorQuery().in(this);
      // 获取元素到距离顶部的距离
      query.select('.scroll').boundingClientRect(data => {
        // 动态计算出 滚动区域的高度
        this.scrollHeight = Math.round(height-data.top)
        // console.log(datatop);
      }).exec();
    },
    methods: {
      // 获取tally数据
      getTally(){
        this.$store.dispatch('getTallyList',{year:this.year,month:this.month})
      },
      // 选择日期
      handleDate(e) {
        this.date = e.detail.value // 2020-10
        this.year = this.date.slice(0, 4) // 2020
        this.month = this.date.slice(5) // 10
        this.getTally()
      },
      // 每月支出|收入的汇总
      monthMoney(eMoney,iMoney){
        this.eMoney = eMoney
        this.iMoney = iMoney
      }
    }
  }
</script>

<style scoped lang="scss">
  page {
    .header {
      padding: 0 20rpx;
      padding-bottom: 20rpx;
      background-color: #8CD0EB;
      // opacity: 0.8;
      // border-radius: 0 0 8px 8px;

      .data {
        text-align: center;
        display: flex;
        justify-content: space-around;

        view {
          // height: 50rpx;
          margin-bottom: 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 14px;

          .text {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
          }
        }

        .year {
          .month {
            text {
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }

    .scroll {
      // padding: 0 20rpx;
      width: 100%;
      background: url('@/static/bj.jpg') 0 0/100% no-repeat;
      // height: 200px;
    }
  }
</style>
